import { format } from "date-fns"
import { ru } from "date-fns/locale"

import { DatePicker } from "../DatePicker/DatePicker"
import { Button } from "../ui/button"
import { useAppDispatch } from "@/hook/useRedux"
import { changeTaskDate } from "@/redux/tasks/tasksSlice"
import { AdvancedButton } from "../AdvancedButton/AdvancedButton"

export const TaskCardDate = ({ taskData, children }: { taskData: Task, children?: React.ReactNode, subtask?: number, checkList?: number }) => {
  const dispatch = useAppDispatch()

  const changeEndDate = (date: any) => {
    dispatch(changeTaskDate({ columnId: taskData.column_id, taskId: taskData.id, date: date.end_date }))
  }

  if (!taskData.end_date) return null

  return (<DatePicker setTaskDate={changeEndDate} end_date={taskData.end_date} clear={changeEndDate} >
    {taskData.end_date ? (
      <AdvancedButton variant={'base'} onClick={e => e.stopPropagation()} className="text-xs font-bold text-[#384455]" >
        {format(new Date(taskData.end_date || ''), 'dd MMMM', { locale: ru })}
      </AdvancedButton>
    ) : children ? (<div onClick={(e) => {
      e.stopPropagation()
      // changeEndDate()
    }} >{children}</div>) : <Button className='p-0 hover:bg-transparent hover:text-slate-300 group invisible' variant={'ghost'} onClick={(e) => e.stopPropagation()} >Выбрать</Button>}
  </DatePicker>
  )
}